<template>
  <div class="home">
    <dv-full-screen-container>
      <div class="top">
        top
      </div>
      <div class="middle">
        <div class="left">
          <div>
            <dv-border-box-1>
              <dv-capsule-chart :config="{
                data: [
                  {
                    name: '南阳',
                    value: 167
                  },
                  {
                    name: '周口',
                    value: 67
                  },
                  {
                    name: '漯河',
                    value: 123
                  },
                  {
                    name: '郑州',
                    value: 55
                  },
                  {
                    name: '西峡',
                    value: 98
                  }
                ]
              }" />
            </dv-border-box-1>
          </div>
          <div><dv-border-box-2>dv-border-box-1</dv-border-box-2>
          </div>
          <div><dv-border-box-3>dv-border-box-1</dv-border-box-3>
          </div>
        </div>
        <div class="center">
          <div id="mainChart" style="width:100%;height:40vw">hello</div>
        </div>
        <div class="right">right</div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    setTimeout(() => {
      let myChart = echarts.init(document.getElementById('mainChart'));
      //画布 cavas
      let option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '30%',
            data: [
              { value: 10, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // }
          }
        ]
      };
      myChart.setOption(option)
      window.onresize = function () {
        // myChart.clear();
        // myChart.setOption(option)
        myChart.resize();
      }
    });


  }

}
</script>

<style lang="scss">
#dv-full-screen-container {
  display: flex;
  flex-direction: column;

  .top {
    height: 5vw;

  }

  .middle {
    flex-grow: 1;
    background: rgb(2, 9, 91);
    display: flex;

    .left,
    .right {
      width: 20vw;
    }

    .left {
      display: flex;
      flex-direction: column;

      >div {
        flex-grow: 1;
      }

    }

    .center {
      flex-grow: 1;
      background: rgb(242, 241, 243)
    }
  }
}
</style>
<dv-flyline-chart :config="config" style="width:100%;height:100%;" />
